
$color-primary := #1089ff;
$color-primary-light1 := mix(#FFFFFF, $color-primary, 20%);
$color-primary-light2 := mix(#FFFFFF, $color-primary, 40%);
$color-primary-light3 := mix(#FFFFFF, $color-primary, 60%);
$color-primary-light4 := mix(#FFFFFF, $color-primary, 80%);
$color-primary-light5 := mix(#FFFFFF, $color-primary, 90%);
$color-primary-light6 := mix(#FFFFFF, $color-primary, 95%);
$color-primary-active := mix(#000000, $color-primary, 10%);

$color-success = #52c41a;
$color-success-light1 := mix(#FFFFFF, $color-success, 20%);
$color-success-light2 := mix(#FFFFFF, $color-success, 40%);
$color-success-light3 := mix(#FFFFFF, $color-success, 60%);
$color-success-light4 := mix(#FFFFFF, $color-success, 80%);
$color-success-light5 := mix(#FFFFFF, $color-success, 90%);
$color-success-light6 := mix(#FFFFFF, $color-success, 95%);
$color-success-active := mix(#000000, $color-success, 10%);

$color-info := #35495E;
$color-info-light1 := mix(#FFFFFF, $color-info, 20%);
$color-info-light2 := mix(#FFFFFF, $color-info, 40%);
$color-info-light3 := mix(#FFFFFF, $color-info, 60%);
$color-info-light4 := mix(#FFFFFF, $color-info, 80%);
$color-info-light5 := mix(#FFFFFF, $color-info, 90%);
$color-info-light6 := mix(#FFFFFF, $color-info, 95%);
$color-info-active := mix(#000000, $color-info, 10%);

$color-warning := #fea638;
$color-warning-light1 := mix(#FFFFFF, $color-warning, 20%);
$color-warning-light2 := mix(#FFFFFF, $color-warning, 40%);
$color-warning-light3 := mix(#FFFFFF, $color-warning, 60%);
$color-warning-light4 := mix(#FFFFFF, $color-warning, 80%);
$color-warning-light5 := mix(#FFFFFF, $color-warning, 90%);
$color-warning-light6 := mix(#FFFFFF, $color-warning, 95%);
$color-warning-active := mix(#000000, $color-warning, 10%);

$color-danger := #ff4d4f;
$color-danger-light1 := mix(#FFFFFF, $color-danger, 20%);
$color-danger-light2 := mix(#FFFFFF, $color-danger, 40%);
$color-danger-light3 := mix(#FFFFFF, $color-danger, 60%);
$color-danger-light4 := mix(#FFFFFF, $color-danger, 80%);
$color-danger-light5 := mix(#FFFFFF, $color-danger, 90%);
$color-danger-light6 := mix(#FFFFFF, $color-danger, 95%);
$color-danger-active := mix(#000000, $color-danger, 10%);

$color-cyan := #25bbe3;
$color-cyan-light1 := mix(#FFFFFF, $color-cyan, 10%);
$color-cyan-light2 := mix(#FFFFFF, $color-cyan, 20%);
$color-cyan-light2 := mix(#FFFFFF, $color-cyan, 40%);
$color-cyan-light3 := mix(#FFFFFF, $color-cyan, 50%);
$color-cyan-light4 := mix(#FFFFFF, $color-cyan, 60%);
$color-cyan-light5 := mix(#FFFFFF, $color-cyan, 90%);
$color-cyan-light6 := mix(#FFFFFF, $color-cyan, 95%);
$color-cyan-active := mix(#000000, $color-cyan, 10%);

/* text-color
-------------------------- */
$color-text-primary := rgba(0, 0, 0, .85);
$color-text-default := rgba(0, 0, 0, .65);
$color-text-secondary := rgba(0, 0, 0, .45);
$color-text-disabled := rgba(0, 0, 0, .25);
$color-text-placeholder := #C0C4CC;
$btn-disable-color := #c5c8ce;


.color-wrap {
  .item {
    position: relative;
    height: 44px;
    margin-right: 4px;
    padding: 0 12px;
    font-size: 14px;
    font-family: Consolas, sans-serif;
    line-height: 44px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    user-select: none;
    &:hover {
      margin-right: -8px;
      border-radius: 0 4px 4px 0;
    }
  }
}
.gary {
  width: 100%;
  display: flex;
  .item {
    cursor: pointer;
    line-height 80px;
    flex: 1;
    text-align: center;
    user-select: none;
  }
}


.primary-dark {
  background: $color-primary-active;
}
.primary {
  background: $color-primary;
}
.primary-light1 {
  background: $color-primary-light1;
}
.primary-light2 {
  background: $color-primary-light1;
}
.primary-light2 {
  background: $color-primary-light2;
}
.primary-light3 {
  background: $color-primary-light3;
}
.primary-light4 {
  background: $color-primary-light4;
}
.primary-light5 {
  background: $color-primary-light5;
}
.primary-light6 {
  background: $color-primary-light6;
}
.success-dark {
  background: $color-success-active;
}
.success {
  background: $color-success;
}
.success-light1 {
  background: $color-success-light1;
}
.success-light2 {
  background: $color-success-light2;
}
.success-light2 {
  background: $color-success-light2;
}
.success-light3 {
  background: $color-success-light3;
}
.success-light4 {
  background: $color-success-light4;
}
.success-light5 {
  background: $color-success-light5;
}
.success-light6 {
  background: $color-success-light6;
}
.info-dark {
  background: $color-info-active;
}
.info {
  background: $color-info;
}
.info-light1 {
  background: $color-info-light1;
}
.info-light2 {
  background: $color-info-light2;
}
.info-light2 {
  background: $color-info-light2;
}
.info-light3 {
  background: $color-info-light3;
}
.info-light4 {
  background: $color-info-light4;
}
.info-light5 {
  background: $color-info-light5;
}
.info-light6 {
  background: $color-info-light6;
}
.warning-dark {
  background: $color-warning-active;
}
.warning {
  background: $color-warning;
}
.warning-light1 {
  background: $color-warning-light1;
}
.warning-light2 {
  background: $color-warning-light2;
}
.warning-light2 {
  background: $color-warning-light2;
}
.warning-light3 {
  background: $color-warning-light3;
}
.warning-light4 {
  background: $color-warning-light4;
}
.warning-light5 {
  background: $color-warning-light5;
}
.warning-light6 {
  background: $color-warning-light6;
}
.danger-dark {
  background: $color-danger-active;
}
.danger {
  background: $color-danger;
}
.danger-light1 {
  background: $color-danger-light1;
}
.danger-light2 {
  background: $color-danger-light2;
}
.danger-light2 {
  background: $color-danger-light2;
}
.danger-light3 {
  background: $color-danger-light3;
}
.danger-light4 {
  background: $color-danger-light4;
}
.danger-light5 {
  background: $color-danger-light5;
}

.danger-light6 {
  background: $color-danger-light6;
}

.cyan-dark {
  background: $color-cyan-active;
}
.cyan {
  background: $color-cyan;
}
.cyan-light1 {
  background: $color-cyan-light1;
}
.cyan-light2 {
  background: $color-cyan-light2;
}
.cyan-light2 {
  background: $color-cyan-light2;
}
.cyan-light3 {
  background: $color-cyan-light3;
}
.cyan-light4 {
  background: $color-cyan-light4;
}
.cyan-light5 {
  background: $color-cyan-light5;
}
.cyan-light6 {
  background: $color-cyan-light6;
}


